<!--
 * @Author: hu_binbin
 * @Date: 2021-08-03 20:44:43
 * @LastEditTime: 2021-08-26 14:29:56
 * @Description: 
-->
<template>
    <van-tabbar v-model="active" active-color="#4dbfae" style="z-index: 1999;padding-top: 0.5rem;">
        <van-tabbar-item v-for="(tab, index) in tabbar" @click="toPage(tab)" :key="index">
            <template slot="icon">
                <img style="height: 4rem;":src="active == tab.selActive?tab.active:tab.inactive" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';

export default {
    name:"tabbar",
    components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem
    },
    data() {
        return {
            active: 0,
            tabbar: [{
                    name: '我的工作',
                    path: '/',
                    selActive: 0,
                    pathName: 'tour',
                    active: require('../assets/tour/show-work.png'),
                    inactive: require('../assets/tour/noshow-work.png'),
                },
                {
                    name: '关注信息',
                    path: '/concernMsg',
                    selActive: 1,
                    pathName: 'concernMsg',
                    active: require('../assets/tour/show-concern-msg.png'),
                    inactive: require('../assets/tour/noshow-concern-msg.png'),
                },
                {
                    name: '消息',
                    path: '/messageList',
                    pathName: 'messageList',
                    selActive: 2,
                    active: require('../assets/tour/show-msg.png'),
                    inactive: require('../assets/tour/noshow-msg.png'),
                },
                {
                    name: '我的',
                    path: '/mine',
                    pathName: 'mine',
                    selActive: 3,
                    active: require('../assets/tour/show-my.png'),
                    inactive: require('../assets/tour/noshow-my.png'),
                }
            ],
            icon: {
                active: require('../assets/tour/show-work.png'),
                inactive: require('../assets/tour/noshow-work.png'),
            }
        };
    },

    watch: {
        $route: 'changeActive'
    },

    created() {
        const toName = this.$route.name;
        this.setActive(toName);
    },

    methods: {
        /**
         * @description:底部 增加选中样式 
         * @param {*} name
         * @return {*}
         */
        changeActive({ name }) {
            this.setActive(name);
        },
        /**
         * @description: 设置选中颜色
         * @param {*} name
         * @return {*}
         */
        setActive(name) {
            this.tabbar.forEach((tab, i) => {
                if (tab.pathName == name) {
                    this.active = i;
                    return false;
                }
            });
        },
        /**
         * @description: 导航栏跳转
         * @param {*} tab
         * @return {*}
         */
         toPage(tab) {
            this.selActive = this.active;
            this.$router.push({
                name:tab.pathName
            })
        }
    },
};
</script>
<style scoped>
    /deep/ .van-tabbar{
        height: 60px;
    }
</style>
